<template>
<h2>App: {{info}}</h2>
<show-info :info="info"
            :roInfo="roInfo"
            @changeInfoName="changeInfoName"
            @changeRoInfoName="changeRoInfoName">

</show-info>
</template>

<script>
import {reactive,readonly} from 'vue'
import ShowInfo from './ShowInfo.vue'
export default {
  name: "App",
  components:{
    ShowInfo
  },
  setup(){
    const info=reactive({
      name:'why',
      age:23,
      height:1.78
    })

    function changeInfoName(payload){
      info.name=payload
    }

    const roInfo=readonly(info)

    function changeRoInfoName(payload){
      info.name=payload
    }

    return{
      info,
      changeInfoName,
      roInfo,
      changeRoInfoName
    }

  }
}
</script>

<style scoped>

</style>